<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主播-屏幕录制</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2 style="text-align: center;">这是主播页面</h2>
<input type="button" title="开启录屏" value="开启录屏" onclick="getMedia()"/>
<input type="button" title="关闭录屏" value="关闭录屏" onclick="closeMedia()"/>

<video id="video" width="500px" height="500px" autoplay="autoplay"></video>

<video id="player" width="500px" height="500px"></video>

<button onclick="start()">开始直播</button>
<button onclick="stop()">停止直播</button>
<script>
    // https://stackoverflow.com/questions/50333767/html5-video-streaming-video-with-blob-urls
    var ws = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        connectWebSocket()
    } else {
        alert('Not support websocket')
    }

    function connectWebSocket() {
        ws = new WebSocket("ws://localhost:8081/ws?type=zhubo");
    }

    //获得video录像区域
    var video = document.getElementById("video");
    var player = document.getElementById("player");

    // 获取设备列表
    navigator.mediaDevices.enumerateDevices().then(deviceList => {
        // audiooutput 扬声器
        // audioinput  麦克风
        // audiooutput 摄像
        console.log(deviceList)
    }).catch(err => console.log(err))

    var promise, stream, options, media, chunks = [], interval

    function getMedia() {
        var constraints = {
            video: true,
            audio: true,
            cursor: 'always' // 录制光标
        };

        promise = navigator.mediaDevices.getDisplayMedia(constraints);
        promise.then(function (MediaStream) {
            stream = MediaStream
            video.style.display = ''
            video.srcObject = stream;
            video.play();

            options = {// 音频比特率为128kbps,视频比特率为2.5Mbps的媒体录制器
                audioBitsPerSecond: 128000,
                videoBitsPerSecond: 2500000,
            }
            media = new MediaRecorder(stream, options)

            media.ondataavailable = function (e) {
                chunks.push(e.data);
            }

            media.onstop = function (e) {
                console.log("data available after MediaRecorder.stop() called.");
                options.mimeType = 'video/mp4'
                // 将录制的流转换成 blob ，并且把 blob 放到第二个video标签播放
                var blob = new Blob(chunks, options);
                try {
                    ws.send(blob);
                } catch (e) {
                    console.log(e)
                }
                media.start()
                console.log("recorder stopped");
            }

            // 开始录制
            media.start()

            interval = setInterval(function () {
                if (media.state!='inactive')
                    media.stop()
            }, 2000)
        }).catch(function (err) {
            console.log(err);
        })
    }

    function closeMedia() {
        video.style.display = 'none'
        video.pause()
        // 关闭录屏
        stream.getTracks().forEach(track => {
            track.stop();
        });
        clearInterval(interval)
        if (media.state != 'inactive') {
            media.stop()
        }
    }

    function start() {

    }

    function stop() {
    }

    //连接发生错误的回调方法
    ws.onerror = function () {
    };

    //连接成功建立的回调方法
    ws.onopen = function (event) {
        console.log('websocket 连接成功！')
    }

    //接收到消息的回调方法
    ws.onmessage = function (event) {
        console.log(event.data)
    }

    //连接关闭的回调方法
    ws.onclose = function () {
        console.log('websocket连接关闭！')
    }


</script>
</body>
</html>